import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getHotCity, getGroupCity } from '@/store/createActions/city'
import Header from '@/component/Header/Header'
import { objToArr } from '@/utils/objToArr'
import './index.scss'

class City extends Component {
  componentDidMount() {
    // 发出获取城市的请求
    this.props.dispatch(getHotCity())
    this.props.dispatch(getGroupCity())
  }

  changeCityRouter = (id, name) => {
    this.props.history.push({
      pathname: `/changeCity/${id}`,
      query: name,
    })
  }

  render() {
    const { hotCity, groupCity } = this.props
    const group = objToArr(groupCity)
    return (
      <div>
        <Header title="" left="string" right={true} />
        <div className="city_nav">
          <div className="city_tip">
            <span>当前定位城市：</span>
            <span>定位不准时，请在城市列表中选择</span>
          </div>
          <div className="guess_city">
            <span></span>
            <span className="right_city_nav">></span>
          </div>
        </div>
        <div className="hot_city_container">
          <h4 className="city_title">热门城市</h4>
          <ul className="citylistul clear">
            {hotCity.map(v => {
              return (
                <li
                  onClick={() => this.changeCityRouter(v.id, v.name)}
                  key={v.id}
                >
                  {v.name}
                </li>
              )
            })}
          </ul>
        </div>
        <div className="group_city_container">
          <ul className="letter_classify">
            {group.map((v, i) => {
              return (
                <li className="letter_classify_li" key={i}>
                  <h4 className="city_title">{v.key}</h4>
                  <ul className="groupcity_name_container citylistul clear">
                    {v.value.map(item => {
                      return (
                        <li
                          onClick={() =>
                            this.changeCityRouter(item.id, item.name)
                          }
                          key={item.id}
                          className="ellipsis"
                        >
                          {item.name}
                        </li>
                      )
                    })}
                  </ul>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    )
  }
}

export default connect(state => ({
  hotCity: state.City.hotCity,
  groupCity: state.City.groupCity,
}))(City)
